<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax请求回顾</title>
  </head>
  <body>
    <button onclick="sendPost()">发送post请求</button>
    <input type="file" name="" id="myFile" />
    <button onclick="sendFile()">上传文件</button>
    <!-- 需要指定form的地址和请求类型 -->
    <form id="formReg" action="http://www.liulongbin.top:3006/api/form" method="post">
      <input type="text" name="username" />
      <input type="text" name="password" />
      <button>提交</button>
    </form>
    <!-- 使用ajax必须引入 -->
    <script src="./lib/axios.js"></script>
    <script src="./lib/jquery.js"></script>
    <!-- 可以使用axios发起ajax请求 -->
    <script>
      axios.defaults.baseURL = "http://www.liulongbin.top:3009"
      //   axios({
      //     // 地址和参数
      //     url: "http://toutiao.itheima.net/v1_0/channels",
      //     // method: "get", // get post delete put patch  默认的method类型为get
      //   }).then(function ({ data }) {
      //     // const { data } = result
      //     console.log(data)
      //   })
      // then是promise的方法
      //
      //   axios.get("http://toutiao.itheima.net/v1_0/channels").then(({ data }) => {
      //     console.log(data)
      //   })
      // 两个参数 都是回调函数
      axios.interceptors.request.use(
        // 成功时执行
        function (config) {
          console.log(config)
          //   return Promise.reject(new Error("我错了")) // 如果是正常执行 一切顺利
          return config // 这里必须return
        },
        // 失败时执行
        function (error) {
          // 一旦进入失败，表示此次的ajax请求就已经结束了
          console.log(error)
          return Promise.reject(error)
        }
      )
      axios.interceptors.response.use(
        function (response) {
          // 此时的response是 返回的请求体参数
          //   debugger
          // axios默认给数据加了一层data
          // 在响应拦截器中解构数据
          return response.data // 表示将返回的数据原封不动返回给axios
        },
        function (error) {
          return Promise.reject(error)
        }
      )
    </script>
    <script>
      function sendPost() {
        // 发起post请求
        // 注册 - 传用户名和密码

        axios({
          url: "/api/reg",
          method: "post",
          data: {
            username: "老高",
            password: 123456,
          },
        }).then((result) => {
          console.log(result)
        })
        // axios
        //   .post("http://www.liulongbin.top:3009/api/reg", {
        //     username: "老高",
        //     password: 123456,
        //   })
        //   .then((result) => {
        //     console.log(result)
        //   })
      }
    </script>
    <script>
      //   监听 表单的提交事件
      $("#formReg").on("submit", function (event) {
        event.preventDefault() // 阻止默认事件
        // console.log($("#formReg").serialize())

        //、//  $("#formReg").serialize() // 得到是一个字符串 username=老高&password=123
        // 发起请求
        axios({
          //   url: "/api/form",
          method: "post",
          // 传递请求体参数
          //   data: $("#formReg").serialize(),
          data: {
            usernmae: $("[name=username]").val(),
            password: $("[name=password]").val(),
          },
        }).then((result) => {
          console.log(result.data)
        })
      })
    </script>
    <script>
      // 上传文件
      function sendFile() {
        const fileDom = document.querySelector("#myFile") // 获取到dom对象
        // console.log(fileDom.files[0])
        const data = new FormData()
        data.append("avatar", fileDom.files[0])
        axios({
          url: "/api/upload/avatar",
          method: "post",
          //   data: {
          //     avatar: fileDom.files[0],
          //   },
          data,
        }).then((result) => {
          console.log(result.data)
        })
      }
    </script>
  </body>
</html>
